<template>
    <div>
        <div style="margin: 10px 0" v-if="admin">
            <el-input style="width: 200px" placeholder="请输入ID" suffix-icon="el-icon-search"
                      v-model="name"></el-input>
            <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
            <el-button type="warning" @click="reset">重置</el-button>
        </div>
        
        <div style="margin: 10px 0" v-if="admin">
            <el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i></el-button>
            <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定批量删除这些数据吗？"
                @confirm="delBatch"
            >
                <el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i></el-button>
            </el-popconfirm>
        </div>
        
        <el-table :data="tableData" border stripe :header-cell-class-name="'headerBg'"
                  @selection-change="handleSelectionChange" >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="ID" width="80" sortable></el-table-column>
            <el-table-column prop="newsTitle" label="新闻标题">
                <template #default="{ row }">
                    <div class="ellipsis">{{ row.newsTitle }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="newsType" label="新闻类型" width="100"></el-table-column>
            <el-table-column prop="newsContent" label="新闻内容" width="500">
                <template #default="{ row }">
                    <div class="ellipsis">{{ row.newsContent }}</div>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="280" align="center">
                <template slot-scope="scope">
                    <el-button type="success"
                               @click="handleEdit(scope.row)">编辑 <i
                        class="el-icon-edit"></i></el-button>
                    <el-popconfirm
                                   class="ml-5"
                                   confirm-button-text='确定'
                                   cancel-button-text='我再想想'
                                   icon="el-icon-info"
                                   icon-color="red"
                                   title="您确定删除吗？"
                                   @confirm="del(scope.row.id)"
                    >
                        <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i>
                        </el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[2, 5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
        
        <!-- 新增、编辑通知 -->
        <el-dialog title="信息" :visible.sync="dialogFormVisible" width="30%">
            <el-form label-width="80px" size="small" status-icon :model="form" :rules="rules" ref="form">
                <el-form-item label="通知标题" prop="newsTitle">
                    <el-input v-model="form.newsTitle" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="通知类型" prop="newsType">
                    <el-input v-model="form.newsType" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="通知内容">
                    <el-input v-model="form.newsContent" autocomplete="off" type="textarea" :rows="4"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save('form')">确 定</el-button>
            </div>
        </el-dialog>
    
    </div>
</template>

<script>

export default {
    name: "News",
    data() {
        return {
            dialogFormVisible:false,
            tableData: [],
            total: 0,
            pageNum: 1,
            pageSize: 10,
            name: "", carriages: [1, 2, 3, 4, 5], // 车厢号范围
            form: {},
            multipleSelection: [],
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
            admin: false,
            rules: {
                newsTitle: [
                    {required: true, message: '请输入标题', trigger: 'blur'},
                ],
                newsType: [
                    {required: true, message: '请输入类型', trigger: 'blur'},
                ],
            }
        }
    },
    created() {
        this.admin = this.user.role.includes("ADMIN");
        this.load()
    },
    methods: {
        load() {
            this.request.get("/news/page", {
                params: {
                    pageNum: this.pageNum,
                    pageSize: this.pageSize,
                    name: this.name,
                }
            }).then(res => {
                this.tableData = res.data.records
                this.total = res.data.total
            })
        },
        save(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.request.post("/news", this.form).then(res => {
                        if (res.code === '200') {
                            this.$message.success("保存成功")
                            this.dialogFormVisible = false
                            this.load()
                        } else {
                            this.$message.error("保存失败")
                        }
                    })
                } else {
                    this.$message.error("请按要求输入")
                    return false;
                }
            });
        },
        handleAdd() {
            this.dialogFormVisible = true
            this.form = {}
            this.$nextTick(() => {
                if (this.$refs.img) {
                    this.$refs.img.clearFiles();
                }
                if (this.$refs.file) {
                    this.$refs.file.clearFiles();
                }
            })
        },
        del(id) {
            this.request.delete("/news/" + id).then(res => {
                if (res.code === '200') {
                    this.$message.success("删除成功")
                    this.load()
                } else {
                    this.$message.error("删除失败")
                }
            })
        },
        delBatch() {
            if (!this.multipleSelection.length) {
                this.$message.error("请选择要删除的数据")
                return
            }
            let ids = this.multipleSelection.map(item => item.id)
            this.request.post("/news/del/batch",ids).then(res => {
                if (res.code === '200') {
                    this.$message.success("删除成功")
                    this.load()
                } else {
                    this.$message.error("删除失败")
                }
            })
        },
        handleEdit(row) {
            this.dialogFormVisible = true
            this.form = {...row}
            this.$nextTick(() => {
                if (this.$refs.img) {
                    this.$refs.img.clearFiles();
                }
                if (this.$refs.file) {
                    this.$refs.file.clearFiles();
                }
            })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
        },
        handleCurrentChange(page) {
            this.pageNum = page
            this.load()
        },
        handleSizeChange(size) {
            this.pageSize = size
            this.load()
        },
        reset() {
            this.name = ""
            this.load()
        },
    }
}
</script>
<style scoped>
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* 单行显示 */
}
</style>